<template>
    <div class="drop-down-search" @click.stop>
      <!--  @blur="closeDropDown" -->

      <view style="display: flex; align-items: center;">
        <input
          @focus="handleFocus" 
          :style="{height: '100%', paddingRight: clear? '60rpx' : '16rpx', display: 'flex'}" 
          type="text" 
          v-model="searchText" 
          :disabled="disabled"
          @input="handleSearch" 
          :placeholder="placeholder"/>

        <text v-if="searchText.length && clear && !disabled" @click="handleClearInput" class="iconfont icon-shanchu"></text>
        <view 
          @click="handleDropDownBox" 
          v-if="icon" 
          :class="['dropdown-container', { rotated:  isDropDownVisible}]"
        ></view> <!-- 添加小三角图标 -->
      </view>

      <scroll-view 
        :scroll-y="true" 
        class="dropdown-scroll" 
        :style="{ maxHeight: (isDropDownVisible && hasOptions) ? dropdownHeight + 'rpx' : '0rpx' }">
        <div class="dropdown-content">
          <div v-for="(option, index) in filteredOptions" :key="index" class="option" @click="selectOption(option, $event)">
            {{ option }}
          </div>
        </div>
      </scroll-view>

    </div>
  </template>
  
  <script>
  export default {
    props: {
      options: {
        type: Array,
        default: []
      },
      value: {
        type: [String,  Number], 
        default: ''
      },
      dropdownHeight: {  // 下拉框的高度
        type: Number,
        default: 200
      },
      placeholder: {
        type: String,
        default: ''
      },
      icon: {
        type: Boolean,
        default: true
      },
      clear: {
        type: Boolean,
        default: true,
      },
      disabled: {
        type: Boolean,
        default: false,
      }
    },
    data() {
      return {
        searchText: this.value.toString(), // 默认将数字转字符串
        isDropDownVisible: false,
        hasOptions: false,
        isFocusMode: false, // 新增：标记是否为焦点模式（显示所有选项）
      };
    },
    computed: {
      // 根据搜索文本过滤选项
      filteredOptions() {
        // 如果是焦点模式，显示所有选项
        if (this.isFocusMode) {
          return this.options;
        }
        // 否则根据搜索文本过滤选项
        return this.options.filter(option =>
          option.toLowerCase().includes(this.searchText.toLowerCase())
        );
      }
    },
    watch: {  // 监听 options 数组，要是输入的东西没有，就关闭下拉框
        searchText() {
          // this.hasOptions = (this.filteredOptions.length > 0)
        },
        // 监听 value 属性变化，用于数据回填
        value: {
          handler(newVal) {
            if (newVal !== undefined && newVal !== null) {
              this.searchText = newVal.toString();
              // 如果值不在选项中，也要显示
            }
          },
          immediate: true // 立即执行一次
        }
    },
    mounted() {
        // 添加点击外部关闭下拉框的事件监听器
        // document.addEventListener('click', this.closeDropDown.bind(this));
        
    },
    beforeDestroy() {
        // 移除事件监听器以防止内存泄漏
       // document.removeEventListener('click', this.closeDropDown.bind(this));
    },
    methods: {
      handleClearInput() { // 清除 input 输入框内容
        this.searchText = ''
        this.$emit('input',''); // 向父组件传递选中的值 // 重新获取新的数据
      },
      handleDropDownBox() { // 控制三角图表事件
        if (this.disabled) return
        
        if (!this.isDropDownVisible) {
          // 显示下拉框时，进入焦点模式
          this.isDropDownVisible = true;
          this.isFocusMode = true;
          this.hasOptions = (this.options.length > 0);
          console.log('== 点击下拉箭头，焦点模式，显示所有选项')
        } else {
          // 隐藏下拉框
          this.isDropDownVisible = false;
        }
      },
      // 处理搜索事件
      handleSearch(e) {
        const inputValue = e.target.value;
        this.$emit('input', inputValue); // 向父组件传递选中的值
        
        // 用户开始输入，退出焦点模式，进入搜索模式
        this.isFocusMode = false;
        
        // 保持下拉框显示状态
        this.isDropDownVisible = true;
        
        // 根据过滤后的选项数量决定是否显示下拉框
        this.hasOptions = (this.filteredOptions.length > 0);
        
        console.log('== 搜索模式，过滤选项')
      },
      handleFocus() {
        this.isDropDownVisible = true;
        this.isFocusMode = true; // 设置为焦点模式
        this.hasOptions = (this.options.length > 0);
        console.log('== 焦点模式，显示所有选项')
      },
      // 选择选项
      selectOption(option, event) {
        event.stopPropagation();
        // 处理选项选择逻辑，比如触发事件、更新绑定值等
        this.searchText = option; // 选中选项后更新搜索文本
        this.isDropDownVisible = false; // 隐藏下拉框
        this.hasOptions = false;
        this.isFocusMode = false; // 退出焦点模式
        this.$emit('changeInput', option); // 向父组件传递选中的值
      },
      // // 获取当前输入的值
      // getSearchText() {
      //   return this.searchText;
      // },
      closeDropDown(event) {
        // 点击事件的目标不包含搜索框或下拉框时，隐藏下拉框
        // this.isDropDownVisible = true;
        // this.hasOptions = true;

        if (!this.$el.contains(event.target)) {
          this.isDropDownVisible = false;
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .drop-down-search {
    position: relative;
    height: 100% !important;
  }
  
  .dropdown-scroll {
    position: absolute;
    top: calc(100% + 12rpx);
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 99;
    /* border: 1rpx solid #ccc; */
    box-shadow: 0 14rpx 30rpx rgb(0, 0, 0, 0.1);
    transition: max-height 0.3s ease;
  }
  
  .dropdown-content {
    padding: 10rpx;
  }
  
  .option {
    padding: 10rpx;
    cursor: pointer;
    border-bottom: 1rpx solid #ccc;
  }
  
  input {
    width: 100%;
    padding: 10rpx;
    box-sizing: border-box;
  }

  .iconfont {
    position: absolute;
    top: 50%;
    right: 55rpx;
    font-size: 50rpx;
    transform: translateY(-50%);
    font-size: 20rpx;
    color: #999;
    cursor: pointer;
  }
  .dropdown-container {  
    position: relative;  
    width: 30rpx; 
    height: 30rpx; 
    margin-right: 10rpx;
    transform:  rotate(180deg); 
  }  
  
  .dropdown-container::before {  
    content: '';  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%); 
    width: 0;  
    height: 0;  
    border-left: 15rpx solid transparent;  
    border-right: 15rpx solid transparent;  
    border-bottom: 15rpx solid #ccc; /* 使用border-bottom创建向下的三角形 */  
    transition: transform 0.3s ease; /* 添加过渡效果 */  
  }  
    
  .rotated::before {  
    transform: translate(-50%, -50%) rotate(180deg); /* 旋转三角形 */  
  } 
  </style>